<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>培训资料管理</title>
		<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
		<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
		<script type="text/javascript" src="../../lib/vue/vue.js"></script>
		<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
		<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
		<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
		<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
		<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../static/js/webApi.js"></script>
		<script type="text/javascript" charset="utf-8" src="../../static/UEditor/ueditor.config.js"></script>
		<script type="text/javascript" charset="utf-8" src="../../static/UEditor/ueditor.all.js"></script>
		<script type="text/javascript" charset="utf-8" src="../../static/UEditor/lang/zh-cn/zh-cn.js"></script>
		<style type="text/css">
			html,
			body,
			#app,
			.el-container {
				padding: 0px;
				margin: 0px;
				height: 100%;
			}

			.el-main {
				padding: 4px;
			}

			.class001>input {
				text-align: center;
			}

			.el-dialog__body {
				padding: 10px;
			}

			[v-cloak] {
				display: none;
			}
		</style>
	</head>

	<body>
		<el-container id="app">
			<el-main v-cloak>
				<el-form :inline="true" :model="queryData" ref="queryData" label-width="100px" label-position="right"
					size="mini" style="height: 35px;">
					<el-form-item label="培训课程名称">
						<el-input placeholder="请输入培训课程名称" v-model="queryData.name" clearable>
						</el-input>
					</el-form-item>
					<el-form-item label="培训课程主题">
						<el-select v-model="queryData.trainingItemId" filterable placeholder="请选择培训课程主题">
							<el-option v-for="item in trainingItem_options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="课程开始结束时间">
						<el-date-picker v-model="queryData.time" type="datetimerange" range-separator="至"
							start-placeholder="开始日期" end-placeholder="结束日期" @change="time_change">
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button icon="el-icon-refresh-left" @click="reset">重置
						</el-button>
						<el-button type="primary" icon="el-icon-search" @click="inquire">查询
						</el-button>
					</el-form-item>
				</el-form>

				<vxe-grid border ref="xGrid" resizable show-overflow highlight-current-row="true" keep-source stripe
					@page-change="handlePageChange" :height="tableHeight" size="mini" :checkbox-config="tableRadio"
					:toolbar="tableToolbar" :pager-config="tablePage" :loading="dataLoading"
					@cell-dblclick="cellDBLClickEvent" :edit-config="{trigger:'click', mode:'row'}"
					:header-cell-style="{'text-align':'center'}" @toolbar-button-click="toolbarButtonClickEvent"
					:data="tableData" :sort-config="{remot:true}">
					<vxe-table-column type="checkbox" width="60" align="center" fixed="left"></vxe-table-column>
					<vxe-table-column field="name" title="培训课程名称" width="200" align="center" fixed="left">
					</vxe-table-column>
					<vxe-table-column field="trainingItemName" title="培训课程主题" width="200" align="center">
					</vxe-table-column>
					<vxe-table-column field="categoryName" title="课程类型" width="200" align="center">
					</vxe-table-column>
					<vxe-table-column field="number" title="报名人数" width="80" align="center">
					</vxe-table-column>
					<vxe-table-column field="directorId" title="课程负责人工号" width="120" align="center">
					</vxe-table-column>
					<vxe-table-column field="directorName" title="课程负责人姓名" width="120" align="center">
					</vxe-table-column>
					<vxe-table-column field="beginTime" title="课程开始时间" width="140" align="center">
					</vxe-table-column>
					<vxe-table-column field="endTime" title="课程结束时间" width="140" align="center">
					</vxe-table-column>
					<vxe-table-column field="registrationTime" title="报名开始时间" width="140" align="center">
					</vxe-table-column>
					<vxe-table-column field="deadline" title="报名截止时间" width="140" align="center">
					</vxe-table-column>
					<vxe-table-column field="createTime" title="创建时间" width="140" align="center">
					</vxe-table-column>
					<vxe-table-column title="操作" width="180" headerAlign="center" align="center" show-overflow>
						<template v-slot="{ row }">

							<vxe-button v-if="row.orgCode!= '01'" type="text" icon="fa fa-trash-o vxe-danger-color"
								@click="removeEvent(row)" title="删除">删除</vxe-button>
						</template>
					</vxe-table-column>
				</vxe-grid>
			</el-main>

			<vxe-modal ref="xModal" v-model="showModal" :title="selectRow ? '编辑&保存' :'新增&保存'" width="850" resize
				destroy-on-close @close="closeEvent('submitForm')">
				<el-form v-loading="submitLoading" :model="submitForm" :rules="formRules" ref="submitForm"
					label-width="120px" label-position="right" size="mini">
					<el-row>
						<el-col>
							<el-form-item label="培训课程名称" prop="name">
								<el-input placeholder="请输入课程名称" v-model="submitForm.name" clearable style="width:100%">
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col span="12">
							<el-form-item label="培训课程类型" prop="categoryId">
								<el-select v-model="submitForm.categoryId" placeholder="请选择培训课程主题"
									@change="category_change" style="width:100%">
									<el-option v-for="item in courseType_options" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col span="12">
							<el-form-item label="培训课程主题" prop="trainingItemId">
								<el-select v-model="submitForm.trainingItemId" placeholder="请选择培训课程主题"
									@change="trainingItem_change" style="width:100%">
									<el-option v-for="item in trainingItem_options" :key="item.value"
										:label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col span="12">
							<el-form-item label="课程参与人数" prop="number">
								<el-input placeholder="请输入参与人数，不限人数请输入'不限'" v-model="submitForm.number" clearable
									style="width:100%"></el-input>
							</el-form-item>
						</el-col>
						<el-col span="12">
							<el-form-item label="预估学习时长" prop="learningDuration">
								<el-input-number placeholder="请设置预估学习时长" :precision="1" :step="0.1" :max="100"
									v-model="submitForm.learningDuration" clearable style="width:100%">
								</el-input-number>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col span="12">
							<el-form-item label="课程起止时间" prop="beginTime">
								<div class="block">
									<el-date-picker v-model="value1" type="datetimerange"
										:picker-options="pickerOptions" @change="datePickerChange"
										value-format='yyyy-MM-dd HH:mm:ss' range-separator="至" start-placeholder="开始时间"
										end-placeholder="结束时间" align="right" :default-time="['08:00:00', '23:00:00']">
									</el-date-picker>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col span="12">
							<el-form-item label="报名起止时间" prop="registrationTime">
								<div class="block">
									<el-date-picker v-model="value2" type="datetimerange"
										:picker-options="pickerOptions" @change="datePickerChange1"
										value-format='yyyy-MM-dd HH:mm:ss' range-separator="至" start-placeholder="开始时间"
										end-placeholder="结束时间" align="right" :default-time="['08:00:00', '23:00:00']">
									</el-date-picker>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col span="12">
							<el-form-item label="课程负责人" prop="directorId">
								<el-cascader v-model="submitForm.directorId" placeholder="请选择课程负责人"
									:options="director_options" :show-all-levels="false" filterable
									@change="director_change" style="width:100%"></el-cascader>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col>
							<el-form-item label="培训课程内容">
								<div id="contentEditor" v-model="submitForm.content"></div>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col>
							<el-form-item label="上传课程附件">
								<el-upload class="upload-demo" :action="upload_url" :before-remove="beforeRemove"
									:on-remove="handleRemove" :on-success="successFile" multiple :file-list="fileList">
									<el-button size="small" type="primary">点击上传</el-button>
								</el-upload>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item style="height:auto;padding:4px 20px;text-align: right;">
						<el-button type="primary" icon="el-icon-folder" @click="submitEvent('submitForm')"
							:disabled="disabled" v-cloak>保存</el-button>
						<el-button type="warning" icon="el-icon-refresh" @click="resetEvent('submitForm')" v-cloak>
							重置
						</el-button>
						<el-button type="warning" icon="el-icon-switch-button" @click="closeEvent('submitForm')"
							v-cloak>
							退出
						</el-button>
					</el-form-item>
				</el-form>
			</vxe-modal>
			<vex-modal>

			</vex-modal>
		</el-container>
	</body>

	<script>
		window.onload = function() {
			var main = {
				data() {
					return {
						tableHeight: '100%',
						queryData: {
							name: "",
							time: "",
							trainingItemId: "",
							beginTime: "", //开始时间
							endTime: "", //结束时间
						},
						tableRadio: {
							trigger: 'row',
							highlight: true
						},
						tableToolbar: {
							id: 'toolbar',
							size: 'mini',
							perfect: true,
							buttons: [{
								code: 'add',
								name: '新增',
								icon: 'fa fa-plus vxe-primary-color'
							}, {
								code: 'update',
								name: '编辑',
								icon: 'fa fa-edit vxe-primary-color'
							}],
						},
						tablePage: {
							perfect: true,
							total: 0,
							currentPage: 1,
							pageSize: 30,
							align: 'left',
							pageSizes: [30, 50, 100, 200],
							layouts: [
								'Sizes',
								'PrevJump',
								'PrevPage',
								'Number',
								'NextPage',
								'NextJump',
								'FullJump',
								'Total'
							]
						},
						dataLoading: false,
						tableData: [],
						industry_options: [{
							label: '教师',
							value: '1'
						}],
						politics_options: [{
							label: '团员',
							value: '1'
						}],
						showModal: false,
						submitForm: {
							categoryId: '', //课程类型ID
							categoryName: '', //课程类型名称
							trainingItemId: "", //培训课程主题ID
							trainingItemName: '', //培训课程主题名称
							name: "", //培训课程名称
							number: "", //参与人数
							beginTime: "", //开始时间
							endTime: "", //结束时间
							registrationTime: "", //报名时间
							deadline: "", //截止时间
							//director: "",//负责人
							directorId: "", //负责人ID
							files: [], //上传文件ID数组
							content: '', //课程内容
							learningDuration: '',
							//auditStatus: "",//审核状态
							//createId: "",//创建人ID
							//createTime: "",//创建时间
							//id: 0,//ID值
							//status: 0,//培训课程状态
							//trainingCode: "",//培训课程编码
						},
						formRules: {
							name: [{
								required: true,
								message: '请输入培训课程名称'
							}],
							trainingItemId: [{
								required: true,
								message: '请选择培训负责人主题'
							}],
							categoryId: [{
								required: true,
								message: '请选课程类型'
							}],
							name: [{
								required: true,
								message: '请输入培训课程名称'
							}],
							number: [{
								required: true,
								message: '请输入课程参与人数'
							}],
							beginTime: [{
								required: true,
								message: '请选择课程起止时间'
							}],
							// endTime: [{
							// 	required: true,
							// 	message: '请选择课程结束时间'
							// }],
							registrationTime: [{
								required: true,
								message: '请选择报名起止时间'
							}],
							// deadline: [{
							// 	required: true,
							// 	message: '请选择截止时间'
							// }],
							directorId: [{
								required: true,
								message: '请选择课程负责人'
							}],
							learningDuration: [{
								required: true,
								message: '请填写学习时长'
							}]
						},
						selectRow: 0,
						submitLoading: false,
						disabled: false,
						trainingItem_options: [],
						courseType_options: [],
						director_options: [],
						fileList: [],
						upload_url: curl + '/attach/uploadAtt',
						contentEditor: null,
						pickerOptions: {
							shortcuts: [{
								text: '最近一周',
								onClick(picker) {
									const end = new Date();
									const start = new Date();
									start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
									picker.$emit('pick', [start, end]);
								}
							}, {
								text: '最近一个月',
								onClick(picker) {
									const end = new Date();
									const start = new Date();
									start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
									picker.$emit('pick', [start, end]);
								}
							}, {
								text: '最近三个月',
								onClick(picker) {
									const end = new Date();
									const start = new Date();
									start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
									picker.$emit('pick', [start, end]);
								}
							}]
						},
						value1: '',
						value2: ''
					}
				},
				created() {
					UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
					UE.Editor.prototype.getActionUrl = function(action) {
						if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') {
							let path = window.curl + '/attach/uploadUeditorAtt';
							return path; //调用后台接口上传图片
						} else {
							return this._bkGetActionUrl.call(this, action);
						}
					}
					this.contentEditor = UE.getEditor('contentEditor', {
						initialFrameWidth: '95%',
						initialFrameHeight: 200,
						elementPathEnabled: false, //删除元素路径
						pasteplain: true,
						/* 纯文本粘贴 */
						autoHeightEnabled: true,
						/* 启用右侧滚轮,默认是true自动长高模式*/
						autoFloatEnabled: true
					});
					this.getDictInfo_trainingItem();
					this.getCourseType_options();
					this.getDirector();
					this.getTrainingList();
				},
				mounted() {
					this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 75;
				},
				methods: {
					datePickerChange(e) {
						this.submitForm.beginTime = e[0];
						this.submitForm.endTime = e[1];
						this.validTime();
					},
					datePickerChange1(e) {
						this.submitForm.registrationTime = e[0];
						this.submitForm.deadline = e[1];
						this.validTime();

					},
					validTime() {
						if (this.submitForm.deadline && this.submitForm.beginTime) {
							let minDate = new Date(this.submitForm.deadline); //报名截止时间
							let maxDate = new Date(this.submitForm.beginTime); //课程开始时间
							if (minDate.getTime() >= maxDate.getTime()) {
								this.$message({
									message: "报名起止时间应早于课程开始时间",
									type: 'warning',
									center: true
								});
								return true;
							}
						}
						return false;
					},
					reset() {
						this.queryData = {
							volunteerName: '',
							industry: '',
							politics: ''
						}
					},
					inquire() {
						this.getTrainingList();
					},
					handlePageChange() {

					},
					cellDBLClickEvent({
						row,
						rowIndex,
						$rowIndex,
						column,
						columnIndex,
						$columnIndex,
						$event
					}) {
						if (columnIndex > 1) {
							this.editEvent(row);
						}
					},
					toolbarButtonClickEvent({
						code
					}, event) {
						let self = this;
						switch (code) {
							case 'add':
								this.selectRow = 0;
								this.submitForm = {
										categoryId: '', //课程类型ID
										categoryName: '', //课程类型名称
										trainingItemId: "", //培训课程主题ID
										trainingItemName: '', //培训课程主题名称
										name: "", //培训课程名称
										number: "", //参与人数
										beginTime: "", //开始时间
										endTime: "", //结束时间
										registrationTime: "", //报名时间
										deadline: "", //截止时间
										//director: "",//负责人
										directorId: "", //负责人ID
										files: [], //上传文件ID数组
										content: '', //课程内容
										learningDuration: ''

									},
									this.value1 = '';
									this.value2 = '';
									this.showModal = true;
								break;
							case 'update':
								if (this.$refs.xGrid.getCheckboxRecords().length == 1) {
									let row = this.$refs.xGrid.getCheckboxRecords()[0];
									this.submitForm.categoryId = String(row.categoryId);
									this.submitForm.categoryName = row.categoryName;
									this.submitForm.trainingItemId = String(row.trainingItemId);
									this.submitForm.name = row.name;
									this.submitForm.number = row.number;
									this.submitForm.beginTime = row.beginTime;
									this.submitForm.endTime = row.endTime;
									this.submitForm.registrationTime = row.registrationTime;
									this.submitForm.deadline = row.deadline;
									this.submitForm.political = row.political;
									this.submitForm.directorId = String(row.directorId);
									this.value1 = [];
									this.value1.push(row.beginTime);
									this.value1.push(row.endTime)
									this.value2 = [];
									this.value2.push(row.registrationTime);
									this.value2.push(row.deadline)
									this.submitForm.content = row.content;
									this.contentEditor.addListener("ready", function() {
										UE.getEditor('contentEditor').setContent(row.content)
									});
									this.submitForm['id'] = row.id
									this.selectRow = 1;
									this.getDataById(row.id);
									this.showModal = true;
								} else if (this.$refs.xGrid.getCheckboxRecords().length > 1) {
									this.$message({
										message: "只能选择一条数据！",
										type: 'warning',
										center: true
									});
								} else {
									this.$message({
										message: "请至少选择一行数据",
										type: 'warning',
										center: true
									});
								}
								break;
						}
					},
					removeEvent(row) {
						let self = this;
						this.$confirm('确认要删除 ' + row.name + ' 这条培训课程的信息吗?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							webApi("/training/del/" + row.id, "get", {}, function(res) {
								//console.log(res)
								if (res.code == 200) {
									self.$message({
										type: 'success',
										message: '删除成功!'
									});
									self.getTrainingList();
								} else {
									self.$XModal.message({
										message: res.msg,
										status: 'error'
									})
								}
							}, function(error) {
								self.$XModal.message({
									message: res.msg,
									status: 'error'
								})
							});
						}).catch(() => {

						});
					},
					getTrainingList() {
						let self = this;
						this.dataLoading = true;
						const params = {
							deadline: "", //截止时间
							endTime: this.queryData.endTime, //结束时间
							name: this.queryData.name, //培训课程名称
							number: "", //参与人数
							page: this.tablePage.currentPage,
							registrationTime: "", //报名时间
							rows: this.tablePage.pageSize,
							beginTime: this.queryData.beginTime, //开始时间
							status: "", //培训课程状态
							trainingCode: "", //培训课程编码
							trainingItemId: this.queryData.trainingItemId, //培训课程主题ID
							dataType:1
						};
						webApi("/training/list", "post", params, function(res) {
							if (res.code == 200) {
								//console.log(res)
								self.tablePage.total = res.data.total;
								self.tableData = res.data.rows;
								self.dataLoading = false;
							} else {
								self.dataLoading = false;
								self.$XModal.message({
									message: res.msg,
									status: 'error'
								})
							}
						}, function(error) {
							self.dataLoading = false;
							self.$XModal.message({
								message: error,
								status: 'error'
							})
						});
					},
					getDictInfo_trainingItem() {
						let self = this;
						const params = {
							dictId: '13'
						};
						webApi("/dict/getDictDetailTreeList", "post", params, function(res) {
							if (res.code == 200) {
								self.trainingItem_options = res.data;
							}
						}, function(error) {
							this.$XModal.message({
								message: error,
								status: 'error'
							})
						});
					},
					trainingItem_change(v) {
						this.submitForm.trainingItemId = v;
						let o = XEUtils.find(this.trainingItem_options, res => res.value == v);
						this.submitForm.trainingItemName = o.label;
					},
					getCourseType_options() {
						let self = this;
						const params = {
							dictId: '23'
						};
						webApi("/dict/getDictDetailTreeList", "post", params, function(res) {
							if (res.code == 200) {
								self.courseType_options = res.data;
							}
						}, function(error) {
							self.$XModal.message({
								message: error,
								status: 'error'
							})
						});
					},
					category_change(v) {
						let o = XEUtils.find(this.courseType_options, res => res.value == v);
						this.submitForm.categoryName = o.label;
					},
					director_change(result) {
						//console.log(result)
						this.submitForm.directorId = result[result.length - 1];
					},
					submitEvent(formName) {
						this.$refs[formName].validate((valid) => {
							if (valid) {
								if (this.validTime()) {
									return;
								}
								this.submitLoading = true;
								this.disabled = true;
								let self = this;
								if (this.fileList.length) {
									this.submitForm.files = this.fileList.map(list => {
										//console.log(list)
										return list
									});
								};
								this.submitForm.content = UE.getEditor('contentEditor').getContent();
								webApi('/training/save', 'post', this.submitForm, function(data) {
									self.submitLoading = false;
									self.disabled = false;
									if (data.code == 200) {
										self.$message({
											message: data.msg,
											type: 'success',
											center: true
										});
										self.getTrainingList();
										self.showModal = false;
										self.$refs[formName].resetFields();
										self.contentEditor.setContent("");
										self.fileList = [];
									} else {
										self.$message({
											message: data.msg,
											type: 'error',
											center: true
										});
									};
								}, function(xhr, type, errorThrown) {
									self.submitLoading = false;
									self.disabled = false;
								})

							} else {
								this.$XModal.message({
									message: "请填写带*的信息",
									status: 'error'
								});
								return false;
							}
						});
					},
					resetEvent(formName) {
						this.$refs[formName].resetFields();
						this.contentEditor.setContent("");
					},
					closeEvent(formName) {
						this.showModal = false;
						this.$refs[formName].resetFields();
						this.contentEditor.setContent("");
						this.fileList = [];
					},
					beforeRemove(file, fileList) {
						return this.$confirm(`确定移除 ${file.name}？`);
					},
					handleRemove(file, fileList) {
						//console.log(file,fileList)
						this.fileList.map((item, i) => {
							if (item.uid == file.uid) {
								this.fileList.splice(i, 1);
							}
						})
					},
					successFile(file, fileList) {

						if (file.code == 200 && file.msg == "请求成功！") {
							this.fileList.push({
								fileSize: file.data.size,
								name: file.data.original,
								attName: file.data.original,
								url: file.data.url,
								attPath: file.data.viewUrl
							});
						} else {
							this.$XModal.message({
								message: file.msg,
								status: 'error'
							});
						}
					},
					time_change(result) {
						this.queryData.beginTime = XEUtils.toDateString(result[0], 'yyyy-MM-dd HH:MM:ss');
						this.queryData.endTime = XEUtils.toDateString(result[1], 'yyyy-MM-dd HH:MM:ss');
					},
					getDirector() {
						let self = this;
						self.submitLoading = true;
						webApi('/users/getUsersByDepartTree', 'get', {}, function(res) {
							self.submitLoading = false;
							if (res.code == 200) {
								self.director_options = res.data;
							};
						}, function(xhr, type, errorThrown) {
							self.submitLoading = false;
						})

					},
					getDataById(id) {
						webApi('/training/getDataById/' + id, 'get', {}, su => {
							if (su.code == 200) {
								this.fileList = [];
								if (su.data.audios && su.data.audios.length > 0) {
									this.fileList = [...this.fileList, ...su.data.audios]
								}
								if (su.data.pictures && su.data.pictures.length > 0) {

									this.fileList = [...this.fileList, ...su.data.pictures]
								}
								if (su.data.videos && su.data.videos.length > 0) {
									this.fileList = [...this.fileList, ...su.data.videos]
								}
								if (su.data.files && su.data.files.length > 0) {
									this.fileList = [...this.fileList, ...su.data.files]
								}

							}
						}, err => {

						})

					}
				}
			};
			var vue = Vue.extend(main);
			new vue().$mount('#app');
		}
	</script>

</html>